<template>
  <div>
    <div class="form_operator">
      <a-button @click="specCreate()" type="primary" icon="plus">新增</a-button>
    </div>
    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="tableData">
      <!--价格-->
      <span slot="money" slot-scope="text">
        <span>{{text | filtersMoney}}</span>
      </span>
      <!--操作-->
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" @click="specUpdate(record)">编辑</a-button>
        <a-popconfirm title="确认删除?" ok-text="确定" cancel-text="取消" @confirm="specDelete(record)">
          <a-button type="danger" icon="delete"></a-button>
        </a-popconfirm>
      </span>
    </a-table>
    <!-- 表单区域 -->
    <GoodsSpecAdd ref="updateForm" @createParam="createParam" @updateParam="updateParam" />
  </div>
</template>

<script>
import GoodsSpecAdd from './goodsSpecAdd';
import ApiTree from '@/api/goods/goodsSpec';
import { Slime, crud } from '@/mixins/slime';
import { evaFiltersMixin } from '@/mixins/evaMixin';
export default {
  name: 'goodsSpecModal',
  mixins: [Slime, evaFiltersMixin],
  props: ['tableData'],
  components: {
    GoodsSpecAdd,
  },
  data() {
    return {
      title: '编辑',
      columns: [
        {
          title: "规格值",
          align: "center",
          dataIndex: "spec",
        },
        {
          title: "单价",
          align: "center",
          dataIndex: "price",
          scopedSlots: { customRender: 'money' },
        },
        {
          title: "可用库存",
          align: "center",
          dataIndex: "quantity",
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    };
  },
  created() {},
  methods: {
    //规格-新增
    specCreate(data){
      this.$refs.updateForm.crudCreate();
    },
    //规格-编辑
    specUpdate(data,index){
      this.$refs.updateForm.crudUpdate(data);
    },
    //
    createParam(param){
      let tableData = this.tableData
      tableData.push(param)
      this.tableData = tableData
      localStorage.setItem('specData', tableData)
      this.$emit("specChang",tableData)
    },
    //
    updateParam(param){
      let tableData = this.tableData
      for(let i=0; i<tableData.length; i++){
        if(tableData[i].spec == param.spec){
          tableData[i] = param
        }
      }
      this.tableData = tableData
      localStorage.setItem('specData', tableData)
      this.$emit("specChang",tableData)
    },
    //规格-删除
    specDelete(param){
      let tableData = this.tableData
      //如果是编辑要删除
      if(this.$route.query.id){
        ApiTree.del([param.id])
        .then((res) => {
          this.$emit("edit")
        })
        .finally(() => {});
      }else{
        for(let i=0; i<tableData.length; i++){
          if(tableData[i].spec == param.spec){
            tableData.splice(i,1)
          }
        }
        this.tableData = tableData
        this.$emit("specChang",tableData)
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form_operator {
  text-align: left;
  margin-bottom: 10px;
}
</style>